<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
  <h1 appChangeText >
    Welcome to {{title}}.
  </h1>
  <div>
    <select (change) ="changemonths($event)">
      <option *ngFor="let i of months">{{i}}</option>
    </select>
  </div>
  <br/>
  <div>
    <span *ngIf = "isavailable; then condition1 else condition2"></span>
    <ng-template #condition1>Condition is valid</ng-template>
    <ng-template #condition2>Condition is invalid</ng-template>
    <br/>
    <br/>
    <button (click)="myClickFunction($event)" >Click me</button>
  </div>
  <br/>
  <b>{{title | uppercase}}</b><br/>
  <b>{{title | lowercase}}</b>
</div>
<div>
  <button nz-button nzType="primary">test</button>
</div>
<div style = "width:100%;">
  <div style = "width:40%;float:left;border:solid 1px black;">
    <h1>Currency Pipe</h1>
    <b>{{6589.23 | currency:"CNY"}}</b><br/>
    <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
    <h1>Date pipe</h1>
    <b>{{todaydate | date:'dd/MMM/yy'}}</b><br/>
    <b>{{todaydate | date:'shortTime'}}</b>
    <h1>Decimal Pipe</h1>
    <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
  </div>
  <div style = "width:40%;float:left;border:solid 1px black;">
    <h1>Json Pipe</h1>
    <b>{{ jsonval | json }}</b>
    <h1>Percent Pipe</h1>
    <b>{{0.54565 | percent}}</b>
    <h1>Slice Pipe</h1>
    <b>{{months | slice:2:6}}</b>
    // here 2 and 6 refers to the start and the end index
  </div>
</div>
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<b>{{todaydate}}</b>



